<template>
  <div class="app-container">
    <div class="top-title">
      <span class="tinyTitle">
        <div class="titleFlag"></div>
        {{ '薪酬区间分布' }}
      </span>
    </div>
    <div class="echart">
      <div class="workLineChart">
        <rangeBarChart />
      </div>
    </div>
  </div>
</template>

<script>
import rangeBarChart from '@/views/position/components/rangeBarChart';

export default {
  name: 'WorkSalary',
  components: { rangeBarChart },
  data() {
    return {};
  },
  created() {
    // this.positionName = this.$route.query.name;
  },
  mounted() {
    // this.fetchData();
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
/* .positionName {
  display: flex;
  width: 100vw;
  align-items: center;
  color: #333333;
  background-color: #edf6ff;
  height: 48px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-left: -56px;
  padding: 0 55px;
} */
.list {
  /* height: 650px;
  overflow-y: auto; */
}
.app-container {
  padding: 10px 0px 0px 0px;
}
.top-title {
  display: flex;
  margin: 20px 40px 10px 0px;
}
.tinyTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #222;
  font-weight: bold;
  margin-right: 40px;

  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
}
.top-line {
  height: 1px;
  background-color: #cfd8f5;
  margin: -24px 0px 20px 120px;
}
.regionBarChart,
.regionLineChart {
  display: flex;
  align-items: center;
  width: 100%;
}
.descTitle {
  color: #555;
  font-size: 16px;
}
.descNum {
  display: flex;
  align-items: baseline;
  color: #1b78ff;
  font-size: 28px;
  margin-top: 22px;
  font-family: D-DIN-PRO-600-SemiBold;
}
.rmb {
  font-size: 22px;
}
.search-container {
  /* margin-bottom: 24px; */
}
.pagination {
  margin-top: 24px;
}
::v-deep .el-table th > .cell {
  color: rgba(0, 0, 0, 0.85);
}
::v-deep .el-table th {
  background-color: #fafafa;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 24px;
}
::v-deep .el-tabs__item {
  height: 40px !important;
  color: #555;
  font-size: 16px;
}
::v-deep .el-tabs__item.is-active {
  color: #1574ff;
  font-weight: bold;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
  height: 1px;
}
.filter-item {
  margin-bottom: 12px;
}
::v-deep .el-form-item {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  min-width: 68px !important;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}

.toolTipGuide {
  display: flex;
}
.toolTipItems {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stepImageContainer {
}
.stepImage {
  width: 264px;
  height: 149px;
}
.stepDesc {
  margin-top: 14px;
  font-size: 14px;
}
</style>
